import React, { Component } from 'react';
import { BrowserRouter as Router, Route, Link, Switch, HashRouter } from 'react-router-dom';
import Routes from './router';
import { connect } from 'react-redux';
import store from './redux/index';

import LeftSider from './components/common/LeftSider';
import Head from './components/common/Head';
import Login from './components/Login';
import { Layout, Menu, Icon, LocaleProvider } from 'antd';

import './App.less';
const { Header, Sider, Content } = Layout;

import zhCN from 'antd/lib/locale-provider/zh_CN';
import moment from 'moment';
import 'moment/locale/zh-cn';
moment.locale('en');

class App extends Component {
    isLogin = () => {
      const loginIfor = sessionStorage.getItem('token');
      // loginIfor ? true : false
      // console.log("1"+loginIfor)
      if (loginIfor) {
        return true;
      } else {
        return false;
      }
    }

    render() {
      // console.log(store.getState()["loginOff"].loginOff);
      const routers = Routes.map((item, index) => {
        return item.exact ? <Route key={index} exact path={item.path} component={item.component} /> : <Route key={index} path={item.path} component={item.component} />;
      });
      if (this.isLogin() || store.getState()['loginOff'].loginOff) {
        return (
          <LocaleProvider locale={zhCN}>
            <Router>
              <div className="App">
                <HashRouter>
                  <Layout>
                    <Sider
                      style={{ overflow: 'auto', height: '100vh', position: 'fixed', left: 0 }}
                      trigger={null}
                      collapsible
                      collapsed={store.getState()['toggleCollapsed'].collapsed}
                    >
                      <div className="logo">
                        <img src={require('./static/img/logo.png')} alt="logo" />
                      </div>
                      <LeftSider />
                    </Sider>
                    <Layout style={{ marginLeft: 200 }}>
                      <Header className="header">
                        <Head />
                      </Header>
                      <Content style={{ background: '#fff', padding: 15, marginLeft: 10, marginRight: 10, minHeight: 280 }}>
                        <Switch>{routers}</Switch>
                      </Content>
                    </Layout>
                  </Layout>
                </HashRouter>
              </div>
            </Router>
          </LocaleProvider>
        );
      } else {
        return (
          <Router>
            <div className="App">
              <Route path="/" component={Login}></Route>
            </div>
          </Router>
        );
      }

    }
}

// export default App;
export default connect((state) => {
  return { ...state };
})(App);
